<template>
  <div>
    <div class="user-diet">
      <div class="user-diet-item" v-for="(item, index) in dietData" :key="index">
          <div class="user-name" @click="unfold(item.id)">{{item.username}}
            <div class="user-unfold" >
                <span class="user-text">{{item.unfold?'收起':'展开'}}</span>
              <span class="iconfont user-icon" :class="item.unfold?'icon-fangxiangshang':'icon-fangxiangxia'"></span></div>
          </div>
          <ul class="user-content"  :class="item.unfold?'height-auto':''" v-for="(val,index) in item.content" :key="index">
            <li class="user-item"> 
              <p class="item-time">{{val.title}} <span class="right-text">推荐时段:({{val.date}})</span></p>
              <p class="item-content" v-html="val.text"></p>
            </li>
          </ul>
      </div>
    </div>
  </div>



 

</template>



<script>
export default {
    data() {
        return {
            dietData:[
                {
                  id:"001",
                  username:"张三",
                  unfold:true,
                  content:[
                    {
                      title:"早餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬 <br/> 2.撒打发斯蒂芬"
                    },
                    {
                      title:"午餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬<br/> 2.撒打发斯蒂芬"
                    },
                    {
                      title:"晚餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬<br/> 2.撒打发斯蒂芬"
                    },
                  ]
                },
                {
                  id:"002",
                  username:"李四",
                  unfold:false,
                  content:[
                    {
                      title:"早餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                    {
                      title:"午餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                    {
                      title:"晚餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                  ]
                },
                {
                  id:"003",
                  username:"王五",
                  unfold:false,
                  content:[
                    {
                      title:"早餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                    {
                      title:"午餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                    {
                      title:"晚餐",
                      date:"7:00-9:00",
                      text:"1.撒打发斯蒂芬/n 2.撒打发斯蒂芬"
                    },
                  ]
                },
              ]
        }
    },
    methods: {
        unfold(id){
          this.dietData.find(item=>{
              if(item.id===id){
                  item.unfold=!item.unfold;
              }
          })
        }
    },
};
</script>

<style lang="scss" scoped>
.user-diet {
    padding: 0 5px;
    margin-top: 5px;
  .user-name {
    line-height: 40px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    text-indent: 20px;
    cursor: pointer;
    .user-unfold{
      display: inline-block;
      float: right;
      margin-right: 30px;
      display: flex;
      align-items: center;
      .user-text{
        font-size: 12px;
      }
      .user-icon{
        display: inline-block;
        width: 16px;
      }
    }

  }
  .user-content {
    overflow: hidden;
    height: 0;
    .user-item {
      margin-top: 10px;
      .item-time {
      }

      .item-content {
        padding-left: 10px;
        line-height: 30px;
      }
    }
  }
  .height-auto{
    height: auto;
  }
}
</style>